<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper>
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
		</template>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="current" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
				<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
				<BasicInformation v-if="item == '基本信息'" :jdrybm="jdrybm" :tabIndex="index" :currentIndex="current"></BasicInformation>
				<MedicalRecord v-if="item == '门诊病例'" :jzId="jzId" :tabIndex="index" :currentIndex="current"></MedicalRecord>
				<Diagnosis v-if="item == '诊断'" :brId="jdrybm" :jzId="jzId" :tabIndex="index" :currentIndex="current"></Diagnosis>
				<Inspect v-if="item == '检验申请'" :jdrybm="jdrybm" :tabIndex="index" :currentIndex="current"></Inspect>
				<Check v-if="item == '检查申请'" :jdrybm="jdrybm" :tabIndex="index" :currentIndex="current"></Check>
				<WesternMedicine v-if="item == '西药处方'" :jdrybm="jdrybm" :tabIndex="index" :currentIndex="current"></WesternMedicine>
				<ChineseMedicine v-if="item == '中药处方'" :jdrybm="jdrybm" :tabIndex="index" :currentIndex="current"></ChineseMedicine>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import BasicInformation from "@/components/outpatientComponents/BasicInformation.vue"
	import MedicalRecord from "@/components/outpatientComponents/MedicalRecord.vue"
	import Diagnosis from "@/components/outpatientComponents/Diagnosis.vue"
	import Inspect from "@/components/outpatientComponents/Inspect.vue"
	import Check from "@/components/outpatientComponents/Check.vue"
	import WesternMedicine from "@/components/outpatientComponents/WesternMedicine.vue"
	import ChineseMedicine from "@/components/outpatientComponents/ChineseMedicine.vue"
	
	const tabs = ref(null)
	const listItem = ref(null)
	const tabList = ref(['基本信息', '门诊病例', '诊断', '检验申请','检查申请', '西药处方','中药处方'])
	const current = ref(0)
	const jdrybm = ref('')
	const jzId = ref('')
	onLoad((options) =>{
		jdrybm.value = options.brId
		jzId.value = options.id
	})
	
	// tabs通知swiper切换
	const tabsChange = (index) =>{
		current.value = index
	}
	// swiper滑动中
	const swiperTransition = (e) =>{
		tabs.value.setDx(e.detail.dx)
	}
	// swiper滑动结束
	const swiperAnimationfinish = (e) =>{
		current.value = e.detail.current;
		tabs.value.unlockDx();
	}
	// 如果要通知当前展示的z-paging刷新，请调用此方法
	const reloadCurrentList = () =>{
		
	}
	// reloadCurrentList() {
	// 	listItem.value[current.value].reload();
	// }
	
	
</script>

<style scoped lang="scss">
.swiper {
		height: 100%;
	}
</style>